<template>
  <div class="video-wrapper">
    <ul
      class="video-container scroll-box"
      v-if="videoList.length"
    >
      <li
        v-for="(item, index) in videoList"
        :key="index"
      >
        <div class="video-box">
          <div
            class="video-poster"
            v-if="!item.showVideo"
          >
            <img
              class="default-img"
              :src="item.poster || require('@/assets/images/video_default.png')"
            >
            <div
              class="play-btn-box"
              @click="initVideo(item, index)"
            >
              <van-icon name="play" />
            </div>
          </div>
          <video
            class="video"
            :id="'cv' + item.ID"
            :src="item.video"
            controls
            v-if="item.type === 1"
          ></video>
          <div
            class="ez-video-box"
            ref="ezVideoBox"
            v-else
          >
            <div
              class="ez-video"
              :id="'eaVideo' + item.ID"
              v-show="item.showVideo"
            ></div>
          </div>
        </div>
        <p class="video-name">{{ item.name }}</p>
      </li>
    </ul>

    <div
      class="no-data-box"
      v-if="noDataState"
    >暂无数据</div>
  </div>
</template>
 
<script>
import EZUIKit from 'ezuikit-js';
import { Icon } from 'vant';
import { getDeviceVideo } from '@/api/deviceManage.js';

export default {
  name: 'VideoList',
  components: {
    [Icon.name]: Icon
  },
  data() {
    return {
      videoList: [],
      noDataState: false,
      ezPlayer: '',
      cmPlayer: '',
      oldEzIndex: '', //萤石云视频下标
      oldCmIndex: '' //普通视频下标
    };
  },
  created() {
    console.log('VideoList--');
    this.getDeviceVideo();
  },
  methods: {
    // 获取设备视频
    getDeviceVideo() {
      getDeviceVideo({
        id: this.$route.query.videoId
      }).then(res => {
        this.videoList = res.data || [];
        if (this.videoList.length <= 0) {
          this.noDataState = true;
        } else {
          this.videoList.map(item => {
            item.showVideo = false;
          });
        }
      });
    },
    // 初始化视频
    initVideo(item, index) {
      this.resetVideoItem();
      if (item.type === 2) {
        this.initEzVideo(item, index);
      } else {
        // 普通视频
        this.initCommonVideo(item, index);
      }
    },
    // 重置视频项状态
    resetVideoItem() {
      // 萤石云
      if (this.ezPlayer) {
        this.setItemFlag(this.oldEzIndex, false);
        this.ezPlayer.stop();
        this.ezPlayer = null;
      }
      // 普通视频
      if (this.cmPlayer) {
        this.setItemFlag(this.oldCmIndex, false);
        this.cmPlayer.pause();
        this.cmPlayer = null;
      }
    },
    // 初始化萤石云视频
    initEzVideo(item, index) {
      this.oldEzIndex = index;
      let params = JSON.parse(item.param_json);
      let width = document.querySelector('.ez-video-box').style;
      console.log('width---', width);
      this.ezPlayer = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: 'eaVideo' + item.ID, // 视频容器ID
        accessToken: params.accessToken,
        url: item.video,
        controls: true
      });
      this.setItemFlag(index, true);
    },
    // 初始化普通视频
    initCommonVideo(item, index) {
      this.oldCmIndex = index;
      this.cmPlayer = document.querySelector('#cv' + item.ID);
      this.cmPlayer.play();
      this.setItemFlag(index, true);
    },
    // 设置视频项
    setItemFlag(index, flag) {
      this.videoList[index].showVideo = flag;
      this.$forceUpdate();
    }
  }
};
</script>

<style lang="scss" scoped>
.video-wrapper {
  width: 100%;
  height: 100%;

  .video-container {
    width: 100%;
    height: 100%;
    padding-bottom: 0.213333rem;

    li {
      width: 100%;
      padding: 0.32rem 0.426667rem;
      margin-top: 0.213333rem;
      background-color: #fff;

      .video-box {
        position: relative;
        width: 100%;
        height: 6.24rem;
        margin-bottom: 0.213333rem;
        background-color: #f2f2f2;

        .video-poster {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;

          .default-img {
            width: 100%;
            height: 100%;
          }

          .play-btn-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1.92rem;
            height: 1.92rem;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;

            .van-icon {
              color: #fff;
              font-size: 1.066667rem;
            }
          }
        }

        .video {
          width: 100%;
          height: 100%;
        }

        .ez-video-box {
          position: relative;
          width: 100%;
          height: 100%;

          .ez-video {
            width: 100%;
            height: 100%;

            ::v-deep iframe {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .video-name {
        width: 100%;
        line-height: 0.533333rem;
        font-size: 0.4rem;
        text-align: center;
      }
    }
  }
}
</style>